<template>
 <div class="tags">
  <div class="main">
    <!-- 面包屑 -->
    <el-breadcrumb
      separator="/"
      v-if="Object.keys(this.$route.query).length > 0"
      style="line-height: 20px;margin-bottom: 20px;"
    >
      <el-breadcrumb-item>学科管理</el-breadcrumb-item>
      <el-breadcrumb-item>{{$route.query.name}}</el-breadcrumb-item>
      <el-breadcrumb-item>目录管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 头部搜索 -->
    <div class="top">
      <div class="" style="margin-bottom: 15px;font-weight: 700;font-size: 14px;">
        <span style="font-size: 14px;">
          标签名称
          <el-input
            size="small"
            style="width: 200px;margin-left: 8px;"
            v-model="paging.directoryName"
            clearable>
          </el-input>
        </span>
        <span style="margin-left: 20px;">
          状态
          <el-select
            style="width: 200px;margin-left: 8px;margin-right: 8px;"
            size="small"
            v-model="paging.state"
            placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </span>
        <el-button @click="qingChu" size="small">清 除</el-button>
        <el-button type="primary" @click="souSuo" size="small">搜 索</el-button>
        <!--  -->
        <span style="float: right;">
          <span style="margin-right: 10px;color: #66b1ff;font-size: 14px;font-weight: 500;cursor: pointer;"
          @click="fanHui"
          v-if="Object.keys(this.$route.query).length > 0"
          >
          ←返回学科
          </span>
          <!-- 新增标签 -->
          <el-button @click="operation('add')" type="success"  icon="el-icon-edit" size="small">
            新增目录
          </el-button>
        </span>
      </div>
      <el-alert
        :title="`数据一共${counts}条`"
        type="info"
        show-icon
        :closable="false"
        >
      </el-alert>
    </div>
    <!-- 表格数据 -->
    <div class="table">
      <el-table
        :data="tableData"
        :border="false"
        style="width: 100%">
        <el-table-column
          type="index"
          width="50"
          label="序号">
        </el-table-column>
        <el-table-column
          prop="subjectName"
          label="所属学科">
        </el-table-column>
        <el-table-column
          prop="directoryName"
          label="目录名称">
        </el-table-column>
        <el-table-column
          prop="username"
          label="创建者">
        </el-table-column>

        <el-table-column
          prop="addDate"
          label="创建日期"
          width="400px"
          >
          <div slot-scope="{row}">
           {{parseTime(row.addDate)}}
          </div>
        </el-table-column>
        <el-table-column
          prop="totals"
          label="面试题数量"
          >
        </el-table-column>

        <el-table-column
          prop="state"
          label="状态"
          width="150px"
        >
          <div slot-scope="{row}">
            {{row.state===1?'已开启':'已禁用'}}
          </div>
        </el-table-column>

        <el-table-column
          label="操作"
          width="200px"
        >
          <template slot-scope="{row}">
            <!-- {{row.state}} -->
            <el-button @click="handleClick(row)" type="text" size="small">{{row.state===1?'启用':'禁用'}}</el-button>
            <el-button type="text" size="small" :disabled="row.state===1?false:true"
            @click="myUpdate('up',row)">修改</el-button>
            <el-button type="text" size="small"
              :disabled="row.state===0||row.totals!==0"
              @click="open(row)" >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div v-if="Object.keys(this.$route.query).length === 0">
      <el-pagination
        class="paging"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="paging.page"
        :page-sizes="[10, 15, 20, 30]"
        :page-size="paging.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="counts">
      </el-pagination>
    </div>
  </div>
  <!-- 弹出框组件 -->
  <directorysAdd v-model="flag" @input="flag=false" :data="data" @fresh="getList" :echoList="echoList" :up="up" :paging="paging"
  @fenYe="handleCurrentChange"
  ></directorysAdd>
  <!-- <button @click="parseTimeMy">hashaskgjhasgkjhasgk</button> -->
 </div>
</template>
<script>
import { parseTime } from '@/utils'
import directorysAdd from '@/module-hmmm/components/directorys-add'
import { list, remove, changeState } from '@/api/hmmm/directorys'
import { simple } from '@/api/hmmm/subjects'
export default {
  name: '',
  components: {
    directorysAdd
  },
  data () {
    return {
      /* 表格数据 */
      tableData: [],
      /* 请求数据 */
      paging: {
        page: 1,
        pagesize: 10,
        directoryName: '',
        state: null
      },
      /* 简单列表 */
      data: [],
      /* 总条数 */
      counts: 0,
      /* top搜索框数据条件 */
      options: [
        {
          value: 1,
          label: '已启用'
        },
        {
          value: 0,
          label: '未启用'
        }
      ],
      /* 弹出框控制器 */
      flag: false,
      /* 获取回显修改的数据 */
      echoList: {},
      /* 点击添加弹出框的判定值,判定他是添加还是修改 */
      up: ''
    }
  },
  created () {
    this.getRuery()
    /* 获取简单的列表 */
    this.getSimple()
    /* 调用获取 */
    // this.getList()
    /* 监听路由值 */
    this.$watch('$route', {
      handler (newVal, oldVal) {
        // console.log(newVal)
        if (newVal) {
          if (Object.keys(this.$route.query).length > 0) {
            // console.log(1111)
            this.getRuery()
          } else {
            this.eliminate()
            this.getList()
          }
        }
        // console.log(oldVal)
      },
      immediate: true
    })
  },
  computed: {

  },
  methods: {
    parseTime,
    /* 修改当前学科信息 */
    myUpdate (up, row) {
      this.flag = true
      //
      this.echoList = row
      this.up = up
    },
    /* 获取简单列表 */
    async getSimple () {
      const res = await simple()
      this.data = res.data
      //
    },
    /* 操作添加或者修改 */
    operation (a) {
      this.flag = true
      this.up = a
    },
    /* 清除搜索条件 */
    eliminate () {
      this.paging = {
        page: 1,
        pagesize: 10,
        directoryName: '',
        state: null
      }
    },
    /* 清除值 */
    qingChu () {
      this.paging.tagName = ''
      this.paging.state = null
    },
    /* 点击搜索 */
    souSuo () {
      this.paging.page = 1
      this.getList()
    },
    /* 获取表格数据 */
    async getList () {
      const res = await list(this.paging)
      //
      this.counts = res.data.counts
      this.tableData = res.data.items
      //
    },
    /* 管理状态是否开启 */
    async handleClick (row) {
      if (row.state === 1) {
        row.state = 0
        await changeState(row)
        this.getList()
      } else {
        row.state = 1
        await changeState(row)
        this.getList()
      }
    },
    /* 分页 */
    handleSizeChange (val) {
      //
      this.paging.pagesize = val
      this.handleCurrentChange()
      this.getList()
    },
    handleCurrentChange (val) {
      //
      this.paging.page = 1
      this.paging.page = val
      this.getList()
    },
    /* 删除数据 */
    // async delremove (row) {
    //   const res = await remove(row)
    //   this.getList()
    // },
    open (row) {
      this.$confirm('此操作将永久删除该目录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        //
        await remove(row)
        //
        this.getList()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
      })
    },
    /* 从其他页面跳转获取参数查询 */
    async getRuery () {
      if (Object.keys(this.$route.query).length > 0) {
        this.paging = {
          page: 1,
          pagesize: 10,
          subjectID: this.$route.query.id
        }
        const res = await list(this.paging)
        this.tableData = res.data.items
        this.counts = res.data.counts
      } else {
        this.getList()
      }
    },
    /* 判断是否有路由值 */
    fanHui () {
      if (Object.keys(this.$route.query).length > 0) {
        this.$router.go(-1)
      }
    }
  }
}
</script>
<style lang='scss' scoped>
.main{
  margin: 15px;
  background-color: #fff;
  padding: 20px;
  box-shadow: 0px 0px 5px 5px rgb(128, 128, 128,0.1);
  .table{
    margin-top: 20px;
    margin-bottom: 20px;
  }
  .paging{
    // left: 10px;
    text-align: right;
  }
}
</style>
